<template>
    <div>
        <Card>
            <p slot="title">
                订单详情
            </p>
            <div>
                <Form class="step-form" ref="orderData" :model="orderData" :label-width="100">

                    <Row span="12">
                        <i-col span="8" >
                            <FormItem label="订单编号：" label-position="left" :label-width="150">
                                 {{orderData.order_no}}
                            </FormItem>
                        </i-col>
                        <i-col span="6" >
                            <FormItem  label="意向金额：" label-position="left" :label-width="150">
                                 {{orderData.intention_money}}
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="24">
                        <i-col span="4" >
                            <FormItem  label="品牌名称：" label-position="left" :label-width="150">
                                 {{orderData.source_brand}}
                            </FormItem>
                        </i-col>
                        <i-col span="9" >
                            <FormItem  label="车型：" label-position="left" :label-width="150">
                               {{orderData.source_model}}
                            </FormItem>
                        </i-col>
                        <i-col span="3" >
                            <FormItem  label="指导价：" label-position="left" :label-width="100">
                               {{orderData.guidance_price}}
                            </FormItem>
                        </i-col>
                        <i-col span="3" >
                            <FormItem  label="优惠价：" label-position="left" :label-width="100">
                               {{orderData.price}}
                            </FormItem>
                        </i-col>
                        <i-col span="4" >
                            <FormItem  label="上牌地：" label-position="left" :label-width="100">
                               {{orderData.province}}-{{orderData.city}}
                            </FormItem>
                        </i-col>
                    </Row>

                    <Row span="24">
                        <i-col class='small-title' span="2" >
                            支付记录
                        </i-col>
                    </Row>
                    <Row span="24">
                        <div style='margin-top:20px;'>
                            <Table border :columns="pay_columns" :data="pay_data"></Table>
                        </div>
                    </Row>

                    <Row span="24" style="margin-top:25px;">
                        <i-col class='small-title' span="2" >
                            验车图片
                        </i-col>
                    </Row>
                    <Row span="24">
                        <i-col span="3">
                            <FormItem label="前侧图片：" prop="img_url" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,2)"></Icon>
                                    </div>
                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                        <i-col span="3">
                            <FormItem label="车尾图片：" prop="img_url" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadCWList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,4)"></Icon>
                                    </div>

                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleCWUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                        <i-col span="3">
                            <FormItem label="左侧图片：" prop="img_url" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadZCList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,3)"></Icon>
                                    </div>

                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleZCUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                    </Row>
                    <Row span="24">
                        <i-col span="3">
                            <FormItem label="右侧图片：" prop="img_url" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadYCList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,5)"></Icon>
                                    </div>

                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleYCUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                        <i-col span="3">
                            <FormItem label="座椅图片：" prop="img_url" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadZYList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,6)"></Icon>
                                    </div>

                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleZYUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                        <i-col span="3">
                            <FormItem label="车架号图片：" label-position="left" :label-width="150">
                            </FormItem>
                        </i-col>
                        <i-col span="5">
                            <template>
                                <div class="demo-upload-list" v-for="item in uploadCJList">
                                    <img :src="item.imgUrl">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,1)"></Icon>
                                    </div>

                                </div>
                                <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png']"
                                    :max-size="2048"
                                    :on-format-error="handleFormatError"
                                    :on-exceeded-size="handleMaxSize"
                                    :before-upload="handleCJUpload"
                                    type="drag"
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                        <Icon type="camera" size="20"></Icon>
                                    </div>
                                </Upload>
                                <Modal title="查看图片" v-model="visible">
                                    <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                </Modal>
                            </template>
                        </i-col>
                    </Row>


                    <FormItem style='margin-top:100px;'>
                        <Button :disabled="hasSubmit" @click="checkcar" style="width:100px;" type="primary">提交验车</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>

</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'setintentionalorder',
    data () {
        return {
            imgViewUrl:'',
            visible: false,
            isupload:true,          // 判断是否可以正常上传图片
            pay_data:[],            // 订单付款记录信息
            uploadList: [],         // 验车图片-前车
            uploadCJList: [],       // 验车图片-车架图片
            uploadZCList:[],        // 验车图片-左侧图片
            uploadCWList:[],        // 验车图片-车尾图片
            uploadYCList:[],        // 验车图片-右侧图片
            uploadZYList:[],        // 验车图片-座椅图片
            orderId:'',             // 订单编号
            offerId:'',             // 发布寻车编号
            userId:'',              // 当前登录者的编号
            orderData: {
                id:'',
                order_no:'',
                source_id:'',
                source_brand: '',
                source_model:'',
                user_id:'',
                user_name:'',
                user_phone:'',
                STATUS:'',
                intention_money:'',
                province:'',
                city:'',
                guidance_price:0,
                price:0
            },
            hasSubmit: false,
            pay_columns: [
                    {
                        title: '支付方式',
                        align: 'center',
                        key: 'payType',
                        render: (h, params) => {
                            if (params.row.payType === 1) {
                                return h('span', '支付宝')
                            }else if(params.row.payType === 2) {
                                return h('span', '微信')
                            }
                        }
                    },
                    {
                        title: '支付编号',
                        align: 'center',
                        key: 'payNo'
                    },
                    {
                        title: '充值用途',
                        align: 'center',
                        key: 'useWay',
                        render: (h, params) => {
                            if (params.row.useWay === 1) {
                                return h('span', '定金')
                            }else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        render: (h, params) => {
                            if (params.row.status === 0) {
                                return h('span', '未支付')
                            }else if(params.row.status === 1) {
                                return h('span', '支付成功')
                            }else if(params.row.status === 2) {
                                return h('span', '支付失败')
                            }else if(params.row.status === 3) {
                                return h('span', '退款中')
                            }else if(params.row.status === 4) {
                                return h('span', '已退款')
                            }
                        }
                    },
                    {
                        title: '金额',
                        align: 'center',
                        key: 'price'
                    },
                    {
                        title: '支付时间',
                        align: 'center',
                        key: 'crtTime'
                    }
                ]
        }
    },
    created () {
        this.init()
    },
    activated () {
        //this.init()
    },
    methods: {
        // 数据初始化
        init () {
            var userId = window.localStorage.getItem('userId')
            this.userId = userId
            this.$store.commit('setActiveName', 'orderv2index');
            var id = this.$route.params.id;
            this.orderId = this.$route.params.id;
            this.selectCheckOrderByOrderId(id);

        },
        // 数据信息
        selectCheckOrderByOrderId(id){
            var _that = this;
            var url = 'adminlogin/v2/carorder/selectCheckOrderByOrderId';
            var data = {
                orderId: id
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                    _that.orderData = res.carOrder
                    _that.pay_data = res.payData
                    res.pictures.forEach(function (c) {
                        if(c.ord === 1){
                            let cj = {}
                            cj.imgUrl = c.path
                            _that.uploadCJList.push(cj);
                        }else if(c.ord === 2){
                            let qc = {}
                            qc.imgUrl = c.path
                            _that.uploadList.push(qc);

                        }else if(c.ord === 3){
                            let zc = {}
                            zc.imgUrl = c.path
                            _that.uploadZCList.push(zc);

                        }else if(c.ord === 4){
                            let cw = {}
                            cw.imgUrl = c.path
                            _that.uploadCWList.push(cw);

                        }else if(c.ord === 5){
                            let yc = {}
                            yc.imgUrl = c.path
                            _that.uploadYCList.push(yc);

                        }else if(c.ord === 6){
                            let zy = {}
                            zy.imgUrl = c.path
                            _that.uploadZYList.push(zy);

                        }
                    })
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (err) {
                console.log('有错误信息');
            });
        },
        // 车架号图片
        handleView (url) {
            this.imgViewUrl = url;
            this.visible = true;
        },
        // 删除
        handleRemove (f,pictureType) {
            let _that = this;
            _that.deleteOrderPicture(pictureType)
            if(pictureType === 1){
                 _that.uploadCJList.splice(_that.uploadCJList.indexOf(f),1);
            } else if (pictureType === 2){
                _that.uploadList.splice(_that.uploadList.indexOf(f),1);
            } else if (pictureType === 3){
                _that.uploadZCList.splice(_that.uploadZCList.indexOf(f),1);
            } else if (pictureType === 4){
                _that.uploadCWList.splice(_that.uploadCWList.indexOf(f),1);
            } else if (pictureType === 5){
                _that.uploadYCList.splice(_that.uploadYCList.indexOf(f),1);
            } else if (pictureType === 6){
                _that.uploadZYList.splice(_that.uploadZYList.indexOf(f),1);
            }
        },
        // 成功
        handleSuccess (res, file) {
            // 因为上传过程为实例，这里模拟添加 url
            file.url = this.imgUrl;
            file.name = this.imgName;

        },
        // 错误
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
            //设置图片是否可以正常上传
            this.isupload = false;
        },
        // 验证大小
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
            this.isupload = false;
        },
        // 上传
        handleUpload (file) {
            if(this.isupload){
                this.file = file
                this.upload(2)
            }
        },
        // 车尾图片
        handleCWUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(4)
            }
        },
        // 左侧图片
        handleZCUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(3)
            }
        },
        // 右侧图片
        handleYCUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(5)
            }
        },
        // 座椅图片
        handleZYUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(6)
            }
        },
        // 车架号图片
        handleCJUpload(file) {
            if(this.isupload){
                    this.file = file
                    this.upload(1)
                }
        },
        // 上传图片
        upload (pictureType) {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            formData.append("type", "order")
            ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                that.addCarOrderPicture(pictureType,res.url)
                if(pictureType === 1){
                    //that.uploadCJList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadCJList.push(yc);
                } else if (pictureType === 2){
                    //that.uploadList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadList.push(yc);
                } else if (pictureType === 3){
                    //that.uploadZCList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadZCList.push(yc);
                } else if (pictureType === 4){
                    //that.uploadCWList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadCWList.push(yc);
                } else if (pictureType === 5){
                    //that.uploadYCList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadYCList.push(yc);
                } else if (pictureType === 6){
                    //that.uploadZYList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadZYList.push(yc);
                }
            }, function (err) {
                console.log(err)
            }).catch(function (error) {
                console.log(error)
            })
        },
        //添加订单图片
        addCarOrderPicture (type,picUrl) {
            let _that = this
            var url = 'adminlogin/v2/carorder/addCarOrderPicture';
            var data = {
                orderId:_that.orderId,
                type:type,
                picUrl:picUrl,
                createUser:_that.userId
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (res) {
                console.log('有错误信息');
            });
        },
        // 提交验车
        checkcar () {
            let _that = this
            var url = 'adminlogin/v2/carorder/checkCar';
            var data = {
                offerId:_that.offerId,
                orderId:_that.orderId
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                    _that.$router.push({
                        name: 'orderv2index'
                    })
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (res) {
                console.log('有错误信息');
            });
        },
        // 删除验车图片
        deleteOrderPicture (ord) {
            let _that = this
            var url = 'adminlogin/v2/carorder/deleteOrderPicture';
            var data = {
                orderId:_that.orderId,
                ord:ord
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                   _that.$Message.success('操作成功！');
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (res) {
                console.log('有错误信息');
            });
        },
        // 返回列表
        goBack () {
            this.$router.push({
                name: 'orderv2index'
            })
        }

    },
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .small-title{
        font-style: normal;
        font-weight: bold;
        font-size:14px;
    }
</style>

